<template>
  <div class="w-25 mx-auto p-3">
    <h5 class="my-4 text-center">注册账户</h5>
    <validate-form ref="formRef">
      <validate-form-item label="邮箱">
        <validate-input
          type="text"
          v-model="state.email"
          :rules="rules.email"
          placeholder="请输入邮箱"
        ></validate-input>
      </validate-form-item>
      <validate-form-item label="昵称">
        <validate-input
          type="text"
          v-model="state.nickName"
          :rules="rules.nickName"
          placeholder="请输入邮箱"
        ></validate-input>
      </validate-form-item>
      <validate-form-item label="密码">
        <validate-input
          type="password"
          v-model="state.password"
          :rules="rules.password"
          placeholder="请输入密码"
        ></validate-input>
      </validate-form-item>
      <validate-form-item label="重复密码">
        <validate-input
          type="password"
          v-model="state.checkPassword"
          :rules="rules.checkPassword"
          placeholder="请输入密码"
        ></validate-input>
      </validate-form-item>
      <div class="form-text mb-3">
        <a href="/login" class="">已经有账户了？去登录</a>
      </div>
      <template #submit>
        <div class="d-grid gap-4 d-flex justify-content-between">
          <button class="btn btn-primary w-50" @click.prevent="handleSubmit">
            注 册
          </button>
          <button
            class="btn btn-outline-primary w-50"
            @click.prevent="handleReset"
          >
            重 置
          </button>
        </div>
      </template>
    </validate-form>
  </div>
</template>
<script lang="ts">
import { DefineComponent, defineComponent, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import axios from '@/plugins/axios'
import ValidateInput from '@/components/ValidateInput.vue'
import ValidateForm from '@/components/ValidateForm.vue'
import ValidateFormItem from '@/components/ValidateFormItem.vue'
import messageCreate from '@/components/MessageCreate'
import { IRules } from '@/types/index'
export default defineComponent({
  name: 'Login',
  components: {
    ValidateInput,
    ValidateForm,
    ValidateFormItem
  },
  setup() {
    const router = useRouter()
    const rules: IRules = {
      email: [
        { type: 'required', message: '请输入邮箱', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
      ],
      nickName: [{ type: 'required', message: '请输入昵称', trigger: 'blur' }],
      password: [
        { type: 'required', message: '请输入密码', trigger: 'blur' },
        { type: 'range', min: 6, message: '密码最少6位', trigger: 'blur' }
      ],
      checkPassword: [
        { type: 'required', message: '请再次输入密码', trigger: 'blur' },
        {
          type: 'validator',
          validator: () => state.password === state.checkPassword,
          message: '密码不一致',
          trigger: 'blur'
        }
      ]
    }
    const state = reactive({
      email: '',
      password: '',
      checkPassword: '',
      nickName: ''
    })
    const formRef = ref<null | DefineComponent>(null)
    const handleSubmit = () => {
      const valid = formRef.value?.handleSubmit()
      if (valid) {
        axios.post('/users', state).then(() => {
          messageCreate(
            {
              type: 'success',
              message: '注册成功，2秒后跳转登录页'
            },
            () => {
              router.push('/login')
            }
          )
        })
      }
    }
    const handleReset = () => {
      formRef.value?.handleClean()
    }
    return {
      state,
      rules,
      formRef,
      handleSubmit,
      handleReset
    }
  }
})
</script>
